<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS选择器</title>
        <style>
            /* 元素选择器 */
            h2 {
                color: aqua;
            }

            /* 类选择器 */
            .highlight {
                background-color: yellow;
            }

            /* ID选择器 */
            #header {
                font-size: 20px;
            }

            /* 通用选择器 */
            * {
                font-family: '楷体';
            }
            /* 子元素选择器 */
            .father > .son {
                color: yellowgreen;
            }
            /* 后代选择器 */
            .father .grandson {
                color: brown;
            }
            /* 相邻元素选择器 */
            h3 + p {
                background-color: red;
            }
            /* 伪类选择器 */
            #element:hover {
                background-color: purple;
            }
            /* 伪元素选择器
                ::after
                ::before
             */
            
        </style>
    </head>
    <body>
        <h1>不同类型的CSS选择器</h1>
        <h2>这是一个元素选择器</h2>
        <h3 class="highlight">这是一个类选择器</h3>
        <h4 id="header">这是一个ID选择器</h4>

        <div class="father">
            <p class="son">这是一个子元素选择器</p>
            <div>
                <p class="grandson">这是一个后代选择器</p>
            </div>
        </div>

        <h3>这是一个相邻兄弟选择器</h3>
        <p>这是另一个p标签</p>

        <h3 id="element">这是一个伪类选择器</h3>
    </body>
</html>